<template>
  <div class="container">
    <section class='f-mtp10'>
      <div class='u-title'>
        <h2>筛选查询</h2>
      </div>
      <div class='u-content u-filter f-ptp10'>
        <div class='u-filter-item'>
          <label for="">短剧标题</label>
          <el-input class='f-w200' clearable v-model="title" placeholder="标题关键字"></el-input>
        </div>
        <div class='u-filter-item'>
          <label for="">所属分类</label>
          <CaseTypeSelect @getCaseType='getCaseType' placeholder='所属分类' />
        </div>
        <el-button class='f-h40 f-mbt10' @click="getList" type="primary">查询</el-button>
      </div>
    </section>
    <div class='f-mtp20'>
      <div class='u-title'>
        <h2>短剧列表</h2>
        <div>
          <!-- <router-link class='u-title-btn' to='/home'>设置首页弹窗</router-link> -->
          <router-link class='u-title-btn' to='/home/addPlaylet'>新增短剧</router-link>
        </div>
      </div>
      <el-table
        :data="videoList"
        border
        style="width: 100%">
        <el-table-column prop="id" label="编号" width="120"></el-table-column>
        <el-table-column prop="title" label="标题" width="200"></el-table-column>
        <el-table-column prop="picUrl" label="封面图片" width="120">
          <template slot-scope="scope">
            <img class='img-cover' :src="scope.row.picUrl" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="caseTypeName" label="所属分类" width="180"></el-table-column>
        <el-table-column prop="playCount" label="播放量" width="180"></el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="180">
          <template slot-scope="scope">
            <span>{{tranDate(scope.row.createTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="manage" label="操作" width="180">
          <template slot-scope="scope">
            <router-link  class='s-c-green f-csp f-mrt10' :to='"/home/editPlaylet/" + scope.row.id'>编辑</router-link>
            <span @click="recommendBtnClickEvent(scope.row)" class='s-c-green f-csp f-mrt10'>{{scope.row.recommend == 0 ? '推荐首页' : '取消推荐'}}</span>
            <span @click="deleteBtnClickEvent(scope.row)" class='s-c-red f-csp'>删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="totalCount > 0" class='f-ptp20 f-pbt20'>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import CaseTypeSelect from '../../components/CaseTypeSelect'
export default {
  name: 'PlayletManage',
  components: {
    'CaseTypeSelect': CaseTypeSelect
  },
  data() {
    return {
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      title: '',
      caseType: '',
      videoList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 日期转换
    tranDate(date) {
      return this._utils.format(date, 'yyyy-mm-dd');
    },
    // 推荐按钮点击事件
    recommendBtnClickEvent(row) {
      let recommend = 0;
      let msg = '取消推荐成功！';
      if(row.recommend == 0) {
        recommend = 1;
        msg = '推荐成功';
      }
      this.updateVideo({
        id: row.id,
        recommend,
      }, msg);
    },
    // 删除按钮点击事件
    deleteBtnClickEvent(row) {
      this.$confirm('确定删除该短剧？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除
        this.updateVideo({
          id: row.id,
          state: 'deleted'
        }, '删除成功！')
      })
    },

    // 更新
    updateVideo(params, msg) {
      this.$store.dispatch('UPDATE_VIDEO', params).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success(msg);
          this.getList();
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 获取法律短剧列表
    getList() {
      this.$store.dispatch('GET_VIDEO_LIST', {
        pageNum: this.currentPage - 1,
        pageSize: this.pageSize,
        title: this.title,
        caseType: this.caseType
      }).then(res => {
        if(res.data.retCode == 0) {
          this.videoList = res.data.data;
          this.totalCount = res.data.totalCount;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 获取分类
    getCaseType(caseType) {
      this.caseType = caseType;
    },

    // 分页组件 回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-cover{
  height: 30px;
  width: auto;
  max-width: 90px;;
  display: block;
}
.top{
  /* display: flex; */
  overflow: hidden;
  padding: 10px 0;
}
.top-item{
  float: left;
  margin-right: 20px;
}
.w-120{
  width: 120px;
}
.w-200{
  width: 200px;
}
</style>
